<template>
  <el-container>
<!--    <el-header>Header</el-header>-->
    <el-container>
      <el-aside>
        <el-image
          style="height: 50px"
          :src="require('../../assets/sys.png')"
          fit="fill"></el-image>
        <el-menu
          :collapse="isCollapse"
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item index="1-1" @click="menuClick('wzlb_1')">文章列表</el-menu-item>
            <el-menu-item index="1-2" >选项2</el-menu-item>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
        </el-menu>

      </el-aside>
      <el-main><router-view/></el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    name: 'index',
    data(){
      return {
        isCollapse:false
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      menuClick (menu) {
        this.$router.push({path:"/Sys/BookEditList"})
      }
    }
  }
</script>

<style scoped>
  .el-aside{
    max-width: 200px;
    background: #011132;
  }
  .el-container,.el-aside{
    height: 100%;
  }
  .el-main{
      background: #fff;
    }

</style>
